// import d3 from 'd3';
// export default {
//     draw () {
//         let margin = ({ top: 20, right: 20, bottom: 20, left: 40 })
//         let width = 1180 - margin.right - margin.left
//         let height = 600 - margin.top - margin.bottom
//         const SVGCx = d3.select('svg').attr("id", "my_svg").attr('width', 1180).attr("height", 600)

//         var svg = SVGCx.append("g").attr("id", "svg")
//             .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

//         d3.csv('formatData.csv', function (nations) {
//             console.log('nation', nations)
//             // let location = [
//             //     [13.059448, 3.7721076],
//             //     [13.653746, 4.0803795],
//             //     [13.422472, 3.8206775],
//             //     [13.942527, 3.7148275],
//             //     [13.70608, 3.9719973],
//             //     [14.810046, 3.5925913],
//             //     [13.791225, 3.9887335],
//             //     [13.193933, 3.9444432],
//             //     [13.607502, 4.083198],
//             //     [13.413936, 4.707655]
//             // ]

//             let xMax, xMin, yMax, yMin
//             let xarr = nations.map(d => parseFloat(d.x))
//             let yarr = nations.map(d => parseFloat(d.y))
//             console.log('x', xarr)
//             console.log('y', yarr)
//             xMax = Math.max(...xarr)
//             xMin = Math.min(...xarr)
//             yMax = Math.max(...yarr)
//             yMin = Math.min(...yarr)
//             let xRate = width / (xMax - xMin)
//             let yRate = height / (yMax - yMin)
//             console.log(xMin, xMax, yMin, yMax)
//             svg.selectAll(".dot").data(nations)
//                 .enter()
//                 .append('circle')
//                 .attr('class', 'dot')
//                 .attr('id', (d, i) => i)
//                 .attr('cx', d => calcX(d.x))
//                 .attr('cy', d => calcY(d.y))
//                 .attr('r', 5)
//                 .attr('fill', d => {
//                     if (d.indicator === "South Africa") return "yellow"
//                     else return "#FF0ab0"
//                 })


//             function calcX (x) {
//                 return (x - xMin) * xRate
//             }
//             function calcY (y) {
//                 return (y - yMin) * yRate
//             }
//             // for (let i = 0; i < location.length - 1; i++) {
//             //     svg.append('line')
//             //         .attr('x1', calcX(location[i][0]))
//             //         .attr('y1', calcY(location[i][1]))
//             //         .attr('x2', calcX(location[i + 1][0]))
//             //         .attr('y2', calcY(location[i + 1][1]))
//             //         .attr('fill', 'yellow')


//             // }
//             // for (let i = 1; i < location.length; i++) {
//             //     svg.append('circle')
//             //         .attr('class', 'dot')
//             //         .attr('cx', (location[i][0] - xMin) * xRate)
//             //         .attr('cy', (location[i][1] - yMin) * yRate)
//             //         .attr('r', 5)
//             //         .attr('fill', 'blue')

//             // }

//         })


//     }

// }